<template>
	<view class="my-order">
		<view class="acea-row nav">
			<view :class="{on: status == -2}" class="acea-row row-center-wrapper" @click="tab(-2)">全部</view>
			<view :class="{on: status == 99}" class="acea-row row-center-wrapper" @click="tab(99)">待付款<text
					v-if="dzfCount>0">({{dzfCount}})</text></view>
			<view :class="{on: status == 0}" class="acea-row row-center-wrapper" @click="tab(0)">已付款</view>
			<view :class="{on: status == 20}" class="acea-row row-center-wrapper" @click="tab(20)">退款</view>
		</view>
		<view class="list"> 
			<view v-for="(item,index) in dataList" :key="item.order_id" class='item'>
				<view @click="goDetails(item)">
					<view class='title acea-row row-between-wrapper'>
						<view class="acea-row row-middle left-wrapper">
							{{item.merchant.mer_name}}

						</view>
						<view class='font-color'>
							<text v-if="item.paid == 1 && item.orderProduct[0].is_refund == 0">(已付款)</text>
							<text v-if="item.paid == 0">(待付款)</text>
							<text v-if="item.orderProduct[0].is_refund == 1 &&item.paid == 1">(退款中)</text>
							合计：￥{{item.total_price}}
						</view>
					</view>
					<view class='item-info acea-row row-between row-top'>
						<view class="pictrues">
							<image v-if="index<5" :src="item.cart_info.product.image"
								v-for="(item,index) in item.orderProduct" mode=""></image>
						</view>
						<view class="sum">
							共{{item.orderProduct.length}}件
						</view>
						<!-- <view class='pictrue'>
              <image :src='item.thumb'></image>
            </view>
            <view class='text acea-row row-between'>
              <view class='name line2'>{{ item.title }}</view>
              <view class='money'>
                <view>￥{{ item.total_price }}</view>
              </view>
            </view> -->
					</view>
					<view class='bottom acea-row  row-middle'>
						<!--  | formatDate -->
						<text>下单时间：{{ item.create_time }}</text>
						<view style="flex: 1;"></view>
						<!-- <view v-if="item.paid == 1" class='bnt cancelBnt'>退款</view> -->
						<view v-if="item.paid == 0 && showBuy" class='bnt bg-color' @click.event.stop="goPay(item)">
							立即付款</view>
					</view>
				</view>
			</view>
		</view>
		<view class='loadingicon acea-row row-center-wrapper' v-if="dataList.length>5">
			<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
		</view>
		<view v-if="dataList.length == 0">
			<emptyPage title="暂无订单~"></emptyPage>
		</view>

		<payment :noPages="true" :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun'
			:order_id="pay_order_id" :totalPrice='totalPrice'></payment>

	</view>
</template>

<script>
	import dataList from "@/mixins/dataList";
	import {
		getOrderList
	} from "@/api/order";
	import {
		performPay
	} from "@/api/2_activity";
	import payment from '@/components/payment';
	const app = getApp()
	export default {
		name: 'activity-order-list',
		components: {
			payment,
		},
		mixins: [dataList],
		data() {
			return {
				loading: false, //是否加载中
				loadend: false, //是否加载完毕
				loadTitle: '加载更多', //提示语

				payMode: [{
						name: "微信支付",
						icon: "icon-weixinzhifu",
						value: 'wechat',
						title: '微信快捷支付',
						payStatus: 1
					},
					// {
					// 	name: "支付宝支付",
					// 	icon: "icon-zhifubao",
					// 	value: 'alipay',
					// 	title: '支付宝支付',
					// 	payStatus: app.globalData.alipay_open
					// },
					// {
					// 	name: "余额支付",
					// 	icon: "icon-yuezhifu",
					// 	value: 'balance',
					// 	title: '可用余额:',
					// 	number: 0,
					// 	payStatus: app.globalData.yue_pay_status
					// }
				],
				pay_close: false,
				pay_order_id: '',
				totalPrice: '0',
				status: -2,
				showBuy: app.globalData.temp_status != 1,
				dzfCount:0
			}
		},
		onShow() {
			this.setDataListReq(getOrderList)
			this.tab(this.status)
			this.tab1()
		},
		onLoad() {
			
			
			uni.$on("gxlist",()=>{
				this.tab(this.status)
			})
		},
		methods: {
			/**
			 * 关闭支付组件
			 * 
			 */
			payClose: function() {
				this.tab(this.status)
				this.pay_close = false;
			},
			/**
			 * 事件回调
			 * 
			 */
			onChangeFun: function(e) {
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				(action && this[action]) && this[action](value);
			},
			/**
			 * 打开支付组件
			 * 
			 */
			goPay: function(item) {
				// console.log(order_id)
				this.$set(this, 'pay_close', true);
				this.order_id = item.order_id;
				this.pay_order_id = item.order_id.toString()
				// this.$set(this, 'pay_order_id', );
				this.$set(this, 'totalPrice', item.pay_price);
			},
			/**
			 * 支付成功回调
			 * 
			 */
			pay_complete: function() {
				this.loadend = false;
				this.page = 1;
				this.tab(this.status)
				this.$set(this, 'pay_close', false);
				this.pay_order_id = '';
				this.order_id = ''
				// this.getOrderData();
				// this.getOrderList();
			},
			/**
			 * 支付失败回调
			 * 
			 */
			pay_fail: function() {
				this.pay_close = false;
				this.pay_order_id = '';

			},
			tab1() {
				getOrderList({
					status: 99,
					type_id: 1,
					paid: 0
				}).then(res=>{
					this.dzfCount = res.data.count
					console.log('===----',res);
				})
			},
			tab(status) {
				this.page = 1
				this.status = status
				this.resetDataList()
				let par = {
					status: this.status,
					type_id: 1,

				}
				if (status == 99) {
					par['paid'] = 0
				}
				this.setDataListPar(par)
				this.getDataList()
			},
			goDetails(item) {
				uni.navigateTo({
					url: `/pages/2_development/user/store_order_details?order_id=${item.order_id}&paid=${item.paid}`
				})
			},
			onReachBottom: function() {
				this.getDataList();
			}


		}
	}
</script>

<style lang="scss">
	@import "./order-list.scss";

	.item-info {
		display: flex;

		.pictrues {
			width: 100%;
			overflow: auto;
			white-space: nowrap;
			flex: 1;

			image {
				width: 100rpx;
				height: 100rpx;
				display: inline-block;
				margin-right: 10rpx;
				border-radius: 2px;
			}
		}

		.sum {
			width: 40rpx;
			height: 100%;
			text-align: center;
		}
	}
</style>
